import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {Map} from 'immutable';

import moment from 'moment';


import {Icon} from 'antd';


export default class OrderInfo extends Component {
    static defaultProps = {
        autoCancelTime: 0,
        autoConfirmTime: 0,
        afterSaleTime: 0,
        detail: Map(),
        current: undefined,
    }


    constructor(props) {
        super(props);

        this.state = {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0
        }
    }



    componentWillUpdate(nextProps) {
        const {autoCancelTime, autoConfirmTime, afterSaleTime} = this.props;
        const {current, detail} = nextProps;

        if (current !== this.props.current && [0,2,3].indexOf(nextProps.current) != -1) {
            clearInterval(this.timer);
            let targetTime = moment(detail.get('autoCloseTime'));
            if (current == 2) {
                targetTime = moment(detail.get('autoConfirmTime'));
            } else if (current == 3) {
                targetTime = moment(detail.get('returnAllowTime'));
            }
            this.timer = setInterval(()=>this.countDown(targetTime), 1000);
        }else if ([0,2,3].indexOf(nextProps.current) == -1) {
            clearInterval(this.timer);
        }

    }


    componentWillUnmout(){
        if (!!this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    }


    render() {
        const {days, hours, minutes, seconds} = this.state;
        const {current} = this.props;

        return (
            <sapn className="t-red">
                {
                    [0, 2, 3].indexOf(current) != -1
                        ?
                        [
                            <span className="font-16 mr3 va-1">
                                <Icon type="clock-circle-o"/>
                            </span>,
                            `倒计时${days}天${hours}小时${minutes}分${seconds}秒`
                        ]
                        :
                        null
                }
            </sapn>
        )
    }


    /**
     * 倒计时
     * @param startTime
     */
    countDown(startTime) {
        let targetDate = moment(startTime);
        let now = moment();

        var calc = {
            days: function() {
                return targetDate.diff( now, 'days' );
            },
            hours: function() {
                targetDate.subtract( calc.days(), 'days' );
                return targetDate.diff( now, 'hours' );
            },
            minutes: function() {
                targetDate.subtract( calc.hours(), 'hours' );
                return targetDate.diff( now, 'minutes' );
            },
            seconds: function() {
                targetDate.subtract( calc.minutes(), 'minutes' );
                return targetDate.diff( now, 'seconds');
            },
        };

        this.setState({
            days:calc.days() || 0,
            hours:calc.hours() || 0,
            minutes:calc.minutes() || 0,
            seconds:calc.seconds() || 0,
        });
    }
}